<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import Search from "@/components/Search.vue";
import { Cell, Tab, Tabs, List, Toast, Icon, Empty } from "vant";
import MapContainer from "@/components/MapContainer.vue";
import { getStoresList } from "@/api/api";
import { useRouter } from "vue-router";
let router = useRouter();
let showSearch = () => router.push({ path: "/search" });
let active = ref(0)
let latitude = ref<string>('')
let longitude = ref<string>('')
let cityName = ref<string>('')
let actionText = ref<string>('搜索')

interface IList {
  address: string
  distance: number
  latitude: string
  longitude: string
  name: string
}
let list = ref<IList[]>([])
let areaList = ref<IList[]>([])
// 获取经纬度和城市名称
let getData = (data: any) => {
  latitude.value = data.latitude
  longitude.value = data.longitude
  cityName.value = data.city
}

let loading = ref(false);
let finished = ref(true);
watch(() => longitude.value, (newValue, oldValue) => {
  if (newValue && list.value.length == 0) {
    loadList()
    finished.value = false
  }
})
let loadList = () => {
  let params = {
    cityName: cityName.value,
    longitude: longitude.value,
    latitude: latitude.value,
    name: ''
  };
  if (!longitude.value) {
    Toast.fail("请开启位置权限")
    return
  }
  getStoresList(params).then((reponse: any) => {
    if (reponse.data.code == "000000") {
      loading.value = true
      finished.value = true
      list.value = reponse.data.data
    } else {
      Toast(reponse.data.msg ? reponse.data.msg : '请求失败')
      finished.value = true
    }
  });
};
const childRef = ref<any>(null);
let showMap = (item: any) => {
  active.value = 1
  areaList.value = item
  childRef.value.clickData(areaList.value);
};
</script>

<template>
  <Search @click="showSearch" :actionText="actionText"></Search>
  <div class="stores-title">所有门店</div>
  <Tabs v-model:active="active" sticky swipeable color="#1677FF" ref="tabs" type="card" class="tab-style" style="margin-bottom:20px;height:calc(100% - 180px)">
    <Tab title="列表">
      <template #title>
        <Icon name="bag-o" />列表
      </template>
      <List v-if="list.length > 0" v-model:loading="loading" :finished="finished" finished-text="亲，没有更多了"
        @load="loadList">
        <Cell v-for="item in list" :key="item.name" :value="item.distance + '公里'" :title="item.name"
          :label="item.address" :item="item" is-link @click="showMap(item)" />
      </List>
      <Empty image="/static/null.png" v-else description="亲，没有搜索到门店信息哦" />
    </Tab>
    <Tab title="地图">
      <template #title>
        <Icon name="location-o" />地图
      </template>
      <MapContainer @getData="getData" ref="childRef" :storeList="list" :areaList="areaList"></MapContainer>
    </Tab>
  </Tabs>
</template>

<style scoped>
:deep(.van-cell__title, .van-cell__value) {
  flex: 1 auto !important;
}

:deep(.van-cell__value) {
  min-width: 80px;
}



:deep(.van-cell) {
  align-items: center;
}

:deep(.van-search__action) {
  font-weight: 400;
  font-size: 15px;
  color: #1677ff;
}

.stores-title {
  height: 45px;
  line-height: 45px;
  padding: 0 12px;
}

:deep(.van-button) {
  min-width: 57px;
  height: 24px;
}

:deep(.van-search__content) {
  border: 1px solid #1677FF;
  border-radius: 6px;
}

:deep(.van-tabs__nav) {
  border-color: transparent !important;
  margin: 0;
margin-bottom: 16px;
}

:deep(.van-tab--card) {
  border-radius: 24px !important;
}

:deep(.van-tab) {
  border-radius: 24px !important;
  border: 1px solid #333333;
  margin-left: 10px;
  font-size: 17px;
  flex: 0.21;
  border-color: #333 !important;
  color: #333 !important;
}

:deep(.van-tab--active) {
  border-color: #1677FF !important;
}

:deep(.van-tab--active .van-tab__text) {
  color: #fff;
}

:deep(.van-tab__text) {
  font-size: 12px;
  color: #333;
}

:deep(.van-sticky) {
  background-color: #fff;
  padding-top: 16px;
}

:deep(.van-cell__title) {
  color: #333;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

:deep(.van-cell__label) {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
:deep(.van-tab--card:last-child) {
  border-right: 1px solid #333;
}
:deep(.van-tabs__content,.van-tab__panel){
  height:100%;
}
:deep(.van-tab__panel){
  height:100%;
}
</style>
